import React,{ useState } from 'react'
import { NavBar, Toast } from 'antd-mobile';
import { useNavigate } from 'react-router-dom';

export default function YiLoginDong() {
  const navigate = useNavigate()
  const dh = JSON.parse(localStorage.getItem('dh'))

  const [fase, setFase] = useState(false)
  const faseButton = () => {
      setFase(!fase)
  }
  const getPhoneNumber = () => {
    if (!fase) {
        alert('请先同意隐私政策与用户协议')
        return
    }
  }


const back = () => Toast.show({
      content: '点击了返回区域',
      duration: 1000,
  },navigate('/login'));
  return (
    <div style={{textAlign:'center'}}>
          <NavBar onBack={back}>一键登录</NavBar>
          <img style={{marginTop:'40%'}} width={'90px'} src='./yidong.png' alt=''/>
          <div style={{margin:'20px 0',lineHeight:' 10px'}}>
            <p>{dh}</p>
            <p style={{color:'#BBBBBB',fontSize:'14px',fontWeight:'bold'}}>中国联通提供认证服务</p>
          </div>
          <span className={fase?'back1':'button_login_yjs'} onClick={()=>{ getPhoneNumber() }}>本机号码一键登录</span>
          <span className={fase?'button_login_yjss':'back1'} onClick={()=>{ navigate('/my') }}>本机号码一键登录</span>
          <div style={{display:'flex',justifyContent:'center', alignItems: 'center', marginTop: '30px'}}>
              <input 
                  type='checkbox' 
                  onChange={(ever)=>{faseButton(ever.target.checked)}}
                  style={{ marginRight: '8px' }}
              />
              <p style={{fontSize:'12px'}}>
                  登录及代表您同意<span style={{color:'#748EDD'}}>中国移动认证服务协议</span>，<span style={{color:'#748EDD'}}><u>《隐私<br/>政策》</u></span>与<span style={{color:'#748EDD'}}><u>《用户协议》</u></span>
                  并授权XXX获取本手机号
              </p>
          </div>
        </div>
  )
}
